<template>
  <div class="tab">
  	<router-link tag="div" class="tab-item" to="/music">
  		<span class="tab-link">Stylus</span>
  	</router-link>
  	<router-link tag="div" class="tab-item" to="/rank">
  		<span class="tab-link">Transition</span>
  	</router-link>
  	<router-link tag="div" class="tab-item" to="/video">
  		<span class="tab-link">Script</span>
  	</router-link>
  </div>
</template>

<script type="text/ecmascript-6">
	export default {}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

.tab
	display flex
	height	40px
	line-height 40px
	text-align center
	.tab-item
		flex 1
		background #dcdcdc
		border-right 1px solid #fff
		.tab-link
		&.router-link-active
			.tab-link
				color red
				
</style>